<template>
  <div
    class="diy-window"
    :style="[
      `padding:${diyItem.style.mt}px ${diyItem.style.mr}px ${diyItem.style.mb}px ${diyItem.style.ml}px `,
    ]"
  >
    <template v-if="diyItem.layout.value > -1">
      <div
        class="window-layout"
        :class="
          (diyItem.style.shade == 1 ? 'style-shade' : '') +
          ' window-layout-' +
          diyItem.layout.value
        "
        :style="[
          `padding:${diyItem.style.pt}px ${diyItem.style.pr}px ${diyItem.style.pb}px ${diyItem.style.pl}px `,
          `background:${
            diyItem.style.bg_status == 1 ? diyItem.style.bg : 'none'
          }`,
          `border-radius:${diyItem.style.t_radius}px ${diyItem.style.t_radius}px ${diyItem.style.b_radius}px ${diyItem.style.b_radius}px`,
        ]"
      >
        <template v-if="diyItem.layout.value == 1">
          <template v-for="(window, indexs) in diyItem.data" :key="indexs">
            <!-- 布局一 -->
            <div class="window-item" v-if="indexs < 2">
              <div
                class="item-image"
                :style="{ padding: diyItem.style.img_gap + 'px ' }"
              >
                <image
                  mode="widthFix"
                  :src="
                    window.img ||
                    $utils.staticImgPath('diy/default.png', 'static')
                  "
                  :class="diyItem.style.img_shade == 1 ? 'style-shade' : ''"
                  :style="{ borderRadius: diyItem.style.img_radius + 'px' }"
                />
              </div>
            </div>
          </template>
        </template>

        <template v-if="diyItem.layout.value == 2">
          <template v-for="(window, indexs) in diyItem.data" :key="indexs">
            <!-- 布局二 -->
            <div
              v-if="indexs < 3"
              class="window-item"
              :style="{
                width: 'calc(33.334% - ' + diyItem.style.img_gap + 'px)',
              }"
            >
              <div class="item-image">
                <image
                  mode="widthFix"
                  :src="
                    window.img ||
                    $utils.staticImgPath('diy/default.png', 'static')
                  "
                  :class="diyItem.style.img_shade == 1 ? 'style-shade' : ''"
                  :style="{ borderRadius: diyItem.style.img_radius + 'px' }"
                />
              </div>
            </div>
          </template>
        </template>

        <template v-if="diyItem.layout.value == 3">
          <template v-for="(window, indexs) in diyItem.data" :key="indexs">
            <!-- 布局三 -->
            <div
              v-if="indexs < 4"
              class="window-item"
              :style="{
                width: 'calc(25% - ' + diyItem.style.img_gap + 'px)',
              }"
            >
              <div class="item-image">
                <image
                  mode="widthFix"
                  :src="
                    window.img ||
                    $utils.staticImgPath('diy/default.png', 'static')
                  "
                  :class="diyItem.style.img_shade == 1 ? 'style-shade' : ''"
                  :style="{ borderRadius: diyItem.style.img_radius + 'px' }"
                />
              </div>
            </div>
          </template>
        </template>

        <template v-if="diyItem.layout.value == 4">
          <template v-for="(window, indexs) in diyItem.data" :key="indexs">
            <div class="window-item" v-if="indexs < 4">
              <!-- 布局四 -->
              <div
                class="item-image"
                :style="{ padding: diyItem.style.img_gap + 'px ' }"
              >
                <image
                  mode="widthFix"
                  :src="
                    window.img ||
                    $utils.staticImgPath('diy/default.png', 'static')
                  "
                  :class="diyItem.style.img_shade == 1 ? 'style-shade' : ''"
                  :style="{ borderRadius: diyItem.style.img_radius + 'px' }"
                />
              </div>
            </div>
          </template>
        </template>

        <template v-if="diyItem.layout.value == 5">
          <!-- 布局五 -->
          <template v-for="(window, indexs) in diyItem.data" :key="indexs">
            <template v-if="indexs == 0">
              <!-- 布局五 左 -->
              <div class="window-item">
                <div
                  class="item-image"
                  :style="{ padding: diyItem.style.img_gap + 'px ' }"
                >
                  <image
                    mode="widthFix"
                    :src="
                      window.img ||
                      $utils.staticImgPath('diy/default.png', 'static')
                    "
                    :class="diyItem.style.img_shade == 1 ? 'style-shade' : ''"
                    :style="{ borderRadius: diyItem.style.img_radius + 'px' }"
                  />
                </div>
              </div>
            </template>
          </template>
          <div class="window-item">
            <template v-for="(window, indexs) in diyItem.data" :key="indexs">
              <template v-if="0 < indexs && indexs < 3">
                <!-- 布局五 右-->
                <div
                  class="item-image"
                  :style="{ padding: diyItem.style.img_gap + 'px ' }"
                >
                  <image
                    mode="widthFix"
                    :src="
                      window.img ||
                      $utils.staticImgPath('diy/default.png', 'static')
                    "
                    :class="diyItem.style.img_shade == 1 ? 'style-shade' : ''"
                    :style="{ borderRadius: diyItem.style.img_radius + 'px' }"
                  />
                </div>
              </template>
            </template>
          </div>
        </template>

        <template v-if="diyItem.layout.value == 6">
          <!-- 布局六-->
          <template v-for="(window, indexs) in diyItem.data" :key="indexs">
            <template v-if="indexs == 0">
              <!-- 布局六 左-->
              <div class="window-item">
                <div
                  class="item-image"
                  :style="{ paddingRight: diyItem.style.img_gap + 'px ' }"
                >
                  <image
                    mode="widthFix"
                    :src="
                      window.img ||
                      $utils.staticImgPath('diy/default.png', 'static')
                    "
                    :class="diyItem.style.img_shade == 1 ? 'style-shade' : ''"
                    :style="{ borderRadius: diyItem.style.img_radius + 'px' }"
                  />
                </div>
              </div>
            </template>
          </template>
          <!-- 布局六 右-->
          <div class="window-item">
            <template v-for="(window, indexs) in diyItem.data" :key="indexs">
              <template v-if="indexs == 1">
                <!-- 布局六 右 上-->
                <div :style="{ paddingBottom: diyItem.style.img_gap + 'px ' }">
                  <div class="item-image">
                    <image
                      mode="widthFix"
                      :src="
                        window.img ||
                        $utils.staticImgPath('diy/default.png', 'static')
                      "
                      :class="diyItem.style.img_shade == 1 ? 'style-shade' : ''"
                      :style="{
                        borderRadius: diyItem.style.img_radius + 'px',
                      }"
                    />
                  </div>
                </div>
              </template>
            </template>
            <div :style="{ paddingTop: diyItem.style.img_gap + 'px ' }">
              <template v-for="(window, indexs) in diyItem.data" :key="indexs">
                <template v-if="1 < indexs && indexs < 4">
                  <!-- 布局六 右 下-->
                  <div class="item-image">
                    <image
                      mode="widthFix"
                      :src="
                        window.img ||
                        $utils.staticImgPath('diy/default.png', 'static')
                      "
                      :class="diyItem.style.img_shade == 1 ? 'style-shade' : ''"
                      :style="{
                        borderRadius: diyItem.style.img_radius + 'px',
                      }"
                    />
                  </div>
                </template>
              </template>
            </div>
          </div>
        </template>
        <template v-if="diyItem.layout.value == 7">
          <!-- 布局七-->
          <template v-for="(window, indexs) in diyItem.data" :key="indexs">
            <template v-if="indexs == 0">
              <div class="window-item">
                <div
                  class="item-image"
                  :style="{ paddingBottom: diyItem.style.img_gap + 'px ' }"
                >
                  <image
                    mode="widthFix"
                    :src="
                      window.img ||
                      $utils.staticImgPath('diy/default.png', 'static')
                    "
                    :class="diyItem.style.img_shade == 1 ? 'style-shade' : ''"
                    :style="{ borderRadius: diyItem.style.img_radius + 'px' }"
                  />
                </div>
              </div>
            </template>
          </template>
          <div class="window-item" v-if="diyItem.layout.value == 7">
            <template v-for="(window, indexs) in diyItem.data" :key="indexs">
              <template v-if="0 < indexs && indexs < 3">
                <div
                  class="item-image"
                  :style="{ padding: diyItem.style.img_gap + 'px ' }"
                >
                  <image
                    mode="widthFix"
                    :src="
                      window.img ||
                      $utils.staticImgPath('diy/default.png', 'static')
                    "
                    :class="diyItem.style.img_shade == 1 ? 'style-shade' : ''"
                    :style="{ borderRadius: diyItem.style.img_radius + 'px' }"
                  />
                </div>
              </template>
            </template>
          </div>
        </template>
      </div>
    </template>
  </div>
</template>

<script lang="ts">
export default {
  name: "diyWindow",
};
</script>
  <script  lang="ts" setup >
import { ref, getCurrentInstance, computed, StyleValue } from "vue";
import { diyWindowDataType } from "@/types";

const {
  proxy: { $utils },
} = getCurrentInstance() as any;

const props = withDefaults(
  defineProps<{
    diyItem: diyWindowDataType;
  }>(),
  {
    diyItem: () => {
      return {
        layout: {
          value: 1,
        },
        style: {
          layout: 1,
          img_gap: 0,
          img_shade: 0,
          img_radius: 0,
          bg_status: 0,
          bg: "#FFFFFF",
          shade: 0,
          mt: 0,
          mb: 0,
          ml: 0,
          mr: 0,
          pt: 0,
          pb: 0,
          pl: 0,
          pr: 0,
          t_radius: 0,
          b_radius: 0,
        },
        data: [],
      };
    },
  }
);
</script>

<style scoped>
.diy-window image {
  width: 100%;
  display: inline-block;
  vertical-align: middle;
}
.diy-window .item-image {
}
.diy-window .window-layout {
  overflow: hidden;
}
.diy-window .window-layout-1 {
  display: flex;
  align-items: center;
}

.diy-window .window-layout-1 .window-item {
  width: 50%;
}
.diy-window .window-layout-1 .window-item:nth-child(1) .item-image {
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.diy-window .window-layout-1 .window-item:nth-child(2) .item-image {
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.diy-window .window-layout-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.diy-window .window-layout-2 .window-item {
  width: 33.334%;
}

.diy-window .window-layout-3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.diy-window .window-layout-3 .window-item {
  width: 25%;
}
.diy-window .window-layout-4 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.diy-window .window-layout-4 .window-item {
  width: 50%;
}
.diy-window .window-layout-4 .window-item:nth-child(1) .item-image {
  padding-top: 0 !important;
  padding-left: 0 !important;
}
.diy-window .window-layout-4 .window-item:nth-child(2) .item-image {
  padding-top: 0 !important;
  padding-right: 0 !important;
}
.diy-window .window-layout-4 .window-item:nth-child(3) .item-image {
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}
.diy-window .window-layout-4 .window-item:nth-child(4) .item-image {
  padding-bottom: 0 !important;
  padding-right: 0 !important;
}

.diy-window .window-layout-5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.diy-window .window-layout-5 .window-item {
  width: 50%;
}
.diy-window .window-layout-5 .window-item:nth-child(1) .item-image {
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.diy-window
  .window-layout-5
  .window-item:nth-child(2)
  .item-image:nth-child(1) {
  padding-top: 0 !important;
  padding-right: 0 !important;
}
.diy-window
  .window-layout-5
  .window-item:nth-child(2)
  .item-image:nth-child(2) {
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}

.diy-window .window-layout-6 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.diy-window .window-layout-6 .window-item {
  width: 50%;
}
.diy-window .window-layout-6 .window-item:nth-child(2) > div:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.diy-window .window-layout-6 .window-item:nth-child(1) .item-image {
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.diy-window
  .window-layout-6
  .window-item:nth-child(2)
  > div:nth-child(2)
  > div {
  width: 50%;
}
.diy-window
  .window-layout-6
  .window-item:nth-child(2)
  > div:nth-child(2)
  > div:nth-child(1) {
  padding-left: 0 !important;
}
.diy-window
  .window-layout-6
  .window-item:nth-child(2)
  > div:nth-child(2)
  > div:nth-child(2) {
  padding-right: 0 !important;
}

.diy-window .window-layout-7 {
}
.diy-window .window-layout-7 .window-item {
  width: 100%;
}
.diy-window .window-layout-7 .window-item:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.diy-window .window-layout-7 .window-item:nth-child(2) .item-image {
  width: 50%;
}
.diy-window
  .window-layout-7
  .window-item:nth-child(2)
  .item-image:nth-child(1) {
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}
.diy-window
  .window-layout-7
  .window-item:nth-child(2)
  .item-image:nth-child(2) {
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}
</style>
